<!-- 
  @description: 通用标签
-->
<template>
  <div class="tag-dv" @click="tagClick" :class="{ active: tagItem.isActive }">
    {{ tagItem.content }}
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue-demi'
import { TodoTag } from '../../types/TodoType'

const props = defineProps({
  tagItem: {
    type: Object as PropType<TodoTag>,
    default: {}
  }
})

const emit = defineEmits(['tagClick'])
function tagClick() {
  emit('tagClick', props.tagItem.content)
}
</script>

<style lang="less" scoped>
.tag-dv {
  width: 114px;
  height: 40px;
  font-size: 20px;
  border-radius: 20px;
  background-color: @primary-lightI-color;
  color: @primary-color;
  transition: all 0.2s ease-in-out;
  .fl();

  &:hover {
    cursor: pointer;
    background-color: @primary-light-color;
  }
}

.active {
  background-color: @primary-light-color;
  transform: scale(1.15);
}
</style>

